<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <!-- 所属分类：级联下拉列表 -->
      <!-- 一级分类 -->
      <el-form-item label="课程类别">
        <el-select
          v-model="courseQuery.subjectParentId"
          placeholder="请选择"
          @change="subjectLevelOneChanged"
        >
          <el-option
            v-for="subject in subjects"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="courseQuery.subjectId" placeholder="请选择">
          <el-option
            v-for="subject in subjectChildList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>

      <!-- 标题 -->
      <el-form-item>
        <el-input v-model="courseQuery.title" placeholder="课程标题" />
      </el-form-item>
      <!-- 讲师 -->
      <el-form-item>
        <el-select v-model="courseQuery.teacherId" placeholder="请选择讲师">
          <el-option
            v-for="teacher in teachers"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="pageQuery()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="courses" border stripe style="width: 100%">
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">
          {{ (current - 1) * size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="封面" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="scope.row.title" width="100%" />
        </template>
      </el-table-column>
      <el-table-column label="课程信息">
        <template slot-scope="scope">
          <a href="">{{ scope.row.title }}</a>
          <p>
            分类： {{ scope.row.subjectParentTitle }} >
            {{ scope.row.subjectTitle }}
          </p>
          <p>
            课时：{{ scope.row.lessonNum }} / 浏览：{{ scope.row.viewCount }} /
            付费学员：{{ scope.row.buyCount }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="讲师" width="100" aligin="center">
        <template slot-scope="scope">
          {{ scope.row.teacherName }}
        </template>
      </el-table-column>
      <el-table-column label="价格" width="100" aligin="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="Number(scope.row.price) === 0"
            >免费</el-tag
          >
          <el-tag v-else>{{ scope.row.price }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="课程状态"
        width="100"
        aligin="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 'Draft' ? 'warning' : 'success'"
            >{{ scope.row.status === "Draft" ? "未发布" : "已发布" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="120" aligin="center">
        <template slot-scope="scope">
          {{ scope.row.gmtCreate.substr(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" aligin="center">
        <template slot-scope="scope">
          <router-link :to="'/edu/course/info/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >修改</el-button
            >
          </router-link>
          <router-link :to="'/edu/course/chapter/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >修改课程大纲</el-button
            >
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delCourseById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="pageQuery"
      :current-page="current"
      :page-size="size"
      layout="total, prev, pager, next, jumper"
      style="padding: 30px 0; text-align: center"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import courseApi from "@/api/edu/course";
import teacherApi from "@/api/edu/teacher";
import subjectApi from "@/api/edu/subject";
export default {
  data() {
    return {
      current: 1, // 当前页
      size: 2, // 每页显示条数
      courseQuery: {
        subjectId: "",
      }, // 查询对象

      // 返回结果
      total: 0, // 总记录数
      courses: [], // 所有返回的数据
      teachers: [], // 所有讲师数据
      subjects: [], // 一级分类
      subjectChildList: [], // 二级分类
    };
  },

  created() {
    this.pageQuery();
    this.findTeacherList();
    this.findSubjectList();
  },
  methods: {
    pageQuery(current = 1) {
      this.current = current;
      courseApi
        .pageQuery(this.current, this.size, this.courseQuery)
        .then((response) => {
          this.courses = response.data.items;
          this.total = response.data.total;
        });
    },
    findTeacherList() {
      teacherApi.findAll().then((response) => {
        response.data.items;
      });
    },

    findSubjectList() {
      subjectApi.getNestedTreeList().then((response) => {
        response.data.items;
      });
    },

    // 每次点击一级分类的时候，获取二级分类，通过一级分类的id
    subjectLevelOneChanged(id) {
      this.courseQuery.subjectId = "";
      // 遍历所有课程
      this.subjects.forEach((subject) => {
        // 如果其中的某一个一级分类id == 我选择的id
        if (subject.id === id) {
          // 获取这个分类下的所有的二级分类
          this.subjectChildList = subject.child;
        }
      });
    },
    // 清空
    resetData() {
      // 1.所有搜索条件清空
      this.courseQuery = {};
      // 2.重新加载页面
      this.pageQuery();
    },

    delCourseById(id) {
      this.$confirm("此操作将永久删除该课时, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除成功，刷新页面
          courseApi.delCourseById(id).then((response) => {
            this.pageQuery();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },
  },
};
</script>
